<!--
	课程任务详情，
	教师查看学生的作业
-->
<template>
<div class="homework-box">
	<!-- 课程任务的信息 start -->
	<div class="homework-base-info">
		<el-descriptions :column="1" border>
			<el-descriptions-item
				label="标题"
				label-align="left"
				align="center"
				label-class-name="cs">
				{{ homework.title }}
			</el-descriptions-item>

			<el-descriptions-item label="开始时间" label-align="left" align="center">
				{{getDateString(homework.startTime)}}
			</el-descriptions-item>

			<el-descriptions-item label="截止时间" label-align="left" align="center">
				{{getDateString(homework.endTime)}}
			</el-descriptions-item>
			<el-descriptions-item label="附件" label-align="left" align="center">
				<div class="appendix-box" @click="download(homework.appendix)">
					{{homework.appendix?homework.appendix.split('/')[4]:""}}
				</div>
			</el-descriptions-item>

			<el-descriptions-item label="任务内容" label-align="left" align="center">
				<div class="content-box">
					{{homework.content}}
				</div>
			</el-descriptions-item>
		</el-descriptions>
	</div>
	<!-- 课程任务的信息 end -->
	<!-- 参与该课程任务的统计信息 start -->
	<div class="homework-count">
		<!-- 这里的统计信息 -->
		<span>参与列表</span>
	</div>
	<!-- 参与该课程任务的统计信息 end -->
	<!-- 参与学生列表 start -->
	<div class="join-student-box">
		<!-- 这里是因为后端数据有点问题，用filter来过添加没得score的数据 -->
		<el-table :data="tableData.filter((item)=>{item.newScore=item.score?item.score:'';return item;})" style="width: 100%" row-key="id" @toggleRowExpansion="expandChange">
			<!-- 课程任务，详细信息 start -->
			<el-table-column type="expand">
				<template #default="props">
					<!-- 展开里面的内容 start -->
					<div class="homework-info-box" @event="ss">
						<el-descriptions title="详情" :column="4" border>
							<el-descriptions-item label="姓名" label-align="right">{{props.row.student_name}}</el-descriptions-item>
							<el-descriptions-item label="学号" label-align="right">{{props.row.account}}</el-descriptions-item>
							<el-descriptions-item label="班级" label-align="right">{{props.row.class_name}}</el-descriptions-item>
							<el-descriptions-item label="附件" label-align="right" align="center">
								<el-tag size="small" style="cursor: pointer" @click="download(props.row.appendix)">{{ props.row.appendix?props.row.appendix:"未上传" }}</el-tag>
							</el-descriptions-item>
							<el-descriptions-item label="回答" label-align="right" align="center">{{props.row.content}}</el-descriptions-item>
						</el-descriptions>
						<!-- 评价，打分 start -->
						<div class="review">
							<!-- 已经评分，可能需要修改 start -->
							<div class="have-score" v-if="props.row.score">
								<el-form :inline="true" class="demo-form-inline">
									<el-form-item label="分数">
										<el-input-number :min="0" :max="100" size="small" type="number"
														 v-model="props.row.newScore"/>
									</el-form-item>
									<el-form-item>
										<el-button size="small" type="danger" @click="changeScore(props.row)">修改</el-button>
									</el-form-item>
								</el-form>
							</div>
							<!-- 已经评分 end -->
							<!-- 没有评分，等待评分 start -->
							<div class="wait-score" v-else>
								<el-form :inline="true" class="demo-form-inline">
									<el-form-item label="分数">
										<el-input-number :min="0" :max="100" size="small" type="number"
														v-model="props.row.newScore"/>
									</el-form-item>
									<el-form-item>
										<el-button size="small" type="success" @click="changeScore(props.row)">确定</el-button>
									</el-form-item>
								</el-form>
							</div>
							<!-- 没有评分，等待评分 end -->
						</div>
						<!-- 评价，打分 end -->
					</div>
					<!-- 展开里面的内容 end -->
				</template>
			</el-table-column>
			<!-- 课程任务，详细信息 end -->
			<!-- 排序 start -->
			<el-table-column type="index" label="序号"></el-table-column>
			<!-- 排序 end -->
			<el-table-column prop="student_name" label="姓名" />
			<el-table-column prop="class_name" label="班级" />
			<el-table-column prop="account" label="学号" />
			<el-table-column label="附件">
				<template #default="props">
					<div v-if="props.row.appendix">有</div>
					<div v-else>无</div>
				</template>
			</el-table-column>
			<el-table-column label="得分">
				<template #default="scope">
					<span v-if="scope.row.score">{{scope.row.score}}</span>
					<span v-else-if="scope.row.score==0" style="color: red;">{{scope.row.score}}</span>
					<span v-else style="color: #E6A23C;">未评阅</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<!-- 参与学生列表 end -->
</div>
</template>

<script>
import DateUtils from "@/utils/DateUtils";
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage} from "element-plus";

export default {
	name: "HomeworkInfo",
	/**
	 * @param homework 当前查看的课程任务对象
	 */
	props:["homework"],
	data(){
		return {
			/*
			* 学生参与
			* */
			tableData:[],

		}
	},
	methods:{
		/*
		* 获取显示时间
		* @param date 时间戳
		* @returns {string}
		* */
		getDateString(date){
			return DateUtils.getDateSting(date);
		},
		changeScore(row){
			// 先判断
			if(row.newScore){
				row.score = row.newScore;
			}else{
				row.score = 0;
				// ElMessage.error("请输入分数");
			}
			console.log(row)
			axios.post(ipconfig.address+"/homework/updateScore",{
				...row
			}).then((response)=>{
				ElMessage.success(response.data.message);
			}).catch((error)=>{
			    console.log(error);
			});
		},
		download(path){
			window.open("http://localhost:8080/file/download?path="+path);
		},
	},
	created(){
		// 获取参与列表
		axios.get(ipconfig.address+"/homework/selectHomeworkStudentList/"+this.homework.id).then((response)=>{
			this.tableData=response.data.data;
			// console.log(response.data.data);
		}).catch((error)=>{
		    console.log(error);
		});
	},
}
</script>

<style lang="scss" scoped>
.homework-box{
	width: 100%;
	height: 100%;
	// 参与该课程任务的统计信息
	.homework-count{
		margin-top: 30px;
		margin-bottom: 30px;

	}

	.homework-info-box{
		//background: #EEEEEE;
		.review{
			width: 500px;
		}
	}

}
</style>